<template>
  <div class="facilityBox">
    <!-- 顶部天气 -->
    <div class="facility-top">
      <div class="tempMessageBox">
        <h1>{{ weatherObj.cs || '南京市' }}</h1>
        <div class="temp">
          <span>{{ weatherObj.wd || 0 }}</span
          >˚C
        </div>
        <div class="message">
          <span class="mr-[30px] text-[24px]">{{ weatherObj.tqqk || '多云' }}</span>
          <span>{{ weatherObj.wdfw }} ˚C</span>
        </div>
      </div>
      <div class="flex justify-between text-center mt-6">
        <div class="boxes">
          <div class="boxTitle">湿度</div>
          <div>
            <span>{{ weatherObj.sd || 0 }}</span
            >%
          </div>
        </div>
        <div class="boxes">
          <div class="boxTitle">风向</div>
          <div>
            <span>{{ weatherObj.fx || '南风' }}</span>
          </div>
        </div>
        <div class="boxes">
          <div class="boxTitle">风速</div>
          <div>
            <span>{{ weatherObj.flfw || 0 }} </span>级
          </div>
        </div>
      </div>
    </div>
    <!-- 未来6小时风力 -->
    <div class="facility-one">
      <div class="titleBox">
        <div class="flex">
          <img src="@/assets/image/titleBg.png" />
          <h1 class="text-white text-[20px] font-bold ml-[10px]">未来24小时风力</h1>
        </div>
      </div>
      <LineEchart ref="windRef" :data="windData"></LineEchart>
    </div>
    <!-- 未来6小时降雨量 -->
    <div class="facility-two">
      <div class="titleBox">
        <div class="flex">
          <img src="@/assets/image/titleBg.png" />
          <h1 class="text-white text-[20px] font-bold ml-[10px]">未来24小时降雨量</h1>
        </div>
      </div>
      <LineEchart ref="railRef" :data="railData"></LineEchart>
    </div>
    <!-- 未来6小时气象 -->
    <div class="facility-three">
      <div class="titleBox">
        <div class="flex">
          <img src="@/assets/image/titleBg.png" />
          <h1 class="text-white text-[20px] font-bold ml-[10px]">未来24小时温度</h1>
        </div>
      </div>
      <LineEchart ref="tempRef" :data="tempData"></LineEchart>
    </div>
  </div>
</template>
<script setup lang="ts">
import { queryWeather, queryWeatherInfo } from '@/service'
import LineEchart from '@/components/common/LineEchart.vue'
const weatherObj: any = ref({})
const windData = ref([]) // 未来24小时天气信息
const railData = ref([]) // 未来24小时风力
const tempData = ref([]) // 未来24小时降雨量

const windRef = ref()
const railRef = ref()
const tempRef = ref()
const getList = async () => {
  // 当前天气信息
  queryWeather({ xzqdm: '320101' }).then((res: any) => {
    weatherObj.value = res
  })
  // 24小时天气信息
  await queryWeatherInfo({ xzqdm: '320101' }).then((res: any) => {
    // 未来24小时风力
    windData.value = res.map((item: any) => {
      return item.fl
    })
    console.log(windData.value)

    windRef.value.initEcharts(windData.value)
    // 未来24小时降雨量
    railData.value = res.map((item: any) => {
      if (item.jyl == null) {
        return [0, 0, 0, 0, 0, 0, 0]
      }
      return item.jyl
    })
    railRef.value.initEcharts(railData.value)
    // 未来24小时温度
    tempData.value = res.map((item: any) => {
      return item.wd
    })
    tempRef.value.initEcharts(tempData.value)
  })
}
getList()
console.log(1111111111)
onBeforeMount(() => {
  // getList();
})
</script>
<style lang="less" scoped>
.facilityBox {
  color: #fff;
  height: 100%;

  .facility-top {
    height: 23%;
    // border: 1px solid #ccc;
    background: rgba(1, 10, 15, 0.3);
    margin-top: 10px;

    text-align: center;
    padding: 10px;
    min-height: 260px;

    .tempMessageBox {
      font-weight: bolder;

      h1 {
        font-size: 28px;
      }

      .temp {
        font-size: 20px;

        span {
          font-size: 30px;
        }
      }

      .message {
        font-size: 20px;
      }
    }

    .boxes {
      background: rgba(1, 10, 15, 0.3);
      border-radius: 10px;
      width: 140px;
      padding: 10px;
      font-size: 16px;

      .boxTitle {
        margin: 5px 10px;
        color: rgba(0, 255, 255, 1);
        font-weight: bolder;
      }

      span {
        font-size: 20px;
        font-weight: bolder;
      }
    }
  }

  .facility-one {
    height: 240px;
    background: rgba(1, 10, 15, 0.3);
    margin-top: 10px;

    // border: 1px solid #ccc;
  }

  .facility-two {
    height: 240px;
    background: rgba(1, 10, 15, 0.3);
    margin-top: 10px;

    // border: 1px solid #ccc;
  }

  .facility-three {
    margin-top: 10px;
    height: 240px;
    background: rgba(1, 10, 15, 0.3);
    // border: 1px solid #ccc;
  }

  .titleBox {
    padding: 10px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;

    span {
      font-weight: bolder;
      font-size: 18px;
      display: block;
    }
  }
}
</style>
